<template>
    <div class="qilin-course flex-row qilin-py-2 qilin-px-2">
        <div class="qilin-course-content qilin-mr-3">
            <div class="qilin-course-content-image"></div>
            <div class="qilin-course-content-box qilin-px-2 qilin-py-2 qilin-mt-2">
                <div class="qilin-course-content-box-header flex-row qilin-py-1">
                    <div class="qilin-course-content-box-header-item qilin-mr-4"
                        v-for="(item,index) in tabList" :key="item.name"
                        :class="currentTabIndex === index ? 'is-active' : '' "
                        @click="currentTabIndex = index"
                    >
                        {{item.name}}
                    </div>
                </div>
                <div class="qilin-course-content-box-container qilin-py-2 qilin-px-1">
                    <div class="qilin-course-content-box-container-score qilin-mb-2">
                        <div class="qilin-course-content-box-container-score-title flex-row">综合评分：</div>
                        <div class="qilin-course-content-box-container-score-rate qilin-py-3 qilin-px-3">
                            <el-rate v-model="score" disabled show-score text-color="#ee6b35"></el-rate>
                        </div>
                    </div>
                    <div class="qilin-course-content-box-container-info">
                        <div class="qilin-course-content-box-container-info-title flex-row">简介：</div>
                        <div class="qilin-course-content-box-container-info-detail qilin-py-2 qilin-pr-3">
                            百年奋斗，启航新征程，讲述建党百年的光辉历程，感受祖国发展、奋斗精神、人民群众
                            建设社会的热情，铭记先辈觉醒岁月。
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="qilin-course-info">
            <div class="qilin-course-info-subject qilin-py-6 qilin-px-2">
                <div class="qilin-course-info-subject-title">党史知识综合教育专题</div>
                <div class="qilin-course-info-subject-number qilin-my-7">课时数：20</div>
                <div class="qilin-course-info-subject-number qilin-my-7">总学分：40</div>
                <el-button type="primary" round size="mini">选课</el-button>
            </div>
            <div class="qilin-course-info-course qilin-mt-2 qilin-py-2 qilin-px-2">
                <div class="qilin-course-info-course-score">
                    <div class="qilin-course-info-course-score-title qilin-ml-1 qilin-pb-1">课程评分</div>
                    <div class="qilin-course-info-course-score-rate qilin-py-2">
                        <el-rate v-model="score" disabled ></el-rate>
                    </div>
                </div>
                <div class="qilin-course-info-course-process">
                    <div class="qilin-course-info-course-process-title qilin-ml-1 qilin-pb-1">学习进度</div>
                    <div class="qilin-course-info-course-process-rate qilin-py-2 qilin-px-2">
                        <div class="qilin-course-info-course-process-rate-text qilin-my-2">
                            <div class="qilin-pb-1">已观看 5 / 20</div>
                            <el-progress :text-inside="true" :stroke-width="18" :percentage="30"></el-progress>
                        </div>
                        <div class="qilin-course-info-course-process-rate-text qilin-my-2">
                            <div class="qilin-pb-1">已获学分 10 / 40</div>
                            <el-progress :text-inside="true" :stroke-width="18" :percentage="40" status="success"></el-progress>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            tabList:[
                {
                    name:"基本信息"
                },
                {
                    name:"目录列表"
                },
                {
                    name:"用户评论"
                }
            ],
            currentTabIndex:0,
            score:3.7
        }
    },
    methods:{

    },
    mounted(){

    }
}
</script>

<style lang="scss" scoped>
.qilin-course{
    width:100%;
    height:100%;
    background-color:#fff;
    border-radius:$radius-default;
    >.qilin-course-content{
        flex:5;
        >.qilin-course-content-image{
            @include QilinBgImage("@/assets/images/image03.jpeg");
            @include QilinWidthHeight(100%,250px);
            border-radius:$radius-default;
        }
        >.qilin-course-content-box{
            border-radius:$radius-default;
            border:1px solid $border-color;
            >.qilin-course-content-box-header{
                border-bottom:1px solid $background-color;
                >.qilin-course-content-box-header-item{
                    cursor:pointer;
                    &.is-active{
                        color:$background-color;
                    }
                }
            }
            >.qilin-course-content-box-container{
                >.qilin-course-content-box-container-score{
                    >.qilin-course-content-box-container-score-title{
                        align-items:center;
                        &::before{
                            content:"";
                            width:3px;
                            height:16px;
                            background-color:#ed6936;
                            margin-right:5px;
                            border-radius:$radius-default;
                        }
                    }
                    >.qilin-course-content-box-container-score-rate{
                        text-align:center;
                    }
                }
                >.qilin-course-content-box-container-info{
                    >.qilin-course-content-box-container-info-title{
                        align-items:center;
                        &::before{
                            content:"";
                            width:3px;
                            height:16px;
                            background-color:#ed6936;
                            margin-right:5px;
                            border-radius:$radius-default;
                        }
                    }
                    >.qilin-course-content-box-container-info-detail{
                        line-height:1.5;
                        color:$text-color-85;
                    }
                }
            }
        }
    }
    >.qilin-course-info{
        flex:2;
        >.qilin-course-info-subject{
            background-color:#e9e9e9;
            border-radius:$radius-default;
            text-align:center;
            >.qilin-course-info-subject-title{
                text-align:center;
                font-size:$medium-text-size;
            }
            >.qilin-course-info-subject-number{
                text-align:center;
            }
            >.el-button{

            }
        }
        >.qilin-course-info-course{
            border:1px solid $border-color;
            border-radius:$radius-default;
            >.qilin-course-info-course-score{
                >.qilin-course-info-course-score-title{
                    border-bottom:1px solid $background-color;
                }
                >.qilin-course-info-course-score-rate{
                    text-align:center;
                }
            }
            >.qilin-course-info-course-process{
                >.qilin-course-info-course-process-title{
                    border-bottom:1px solid $background-color;
                }
                >.qilin-course-info-course-process-rate{

                }
            }
        }
    }
}
</style>
